<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted, reactive } from 'vue'
import { getGenderNumberAPI } from "@/api/panel.ts";

const charts = ref()
let genderList = reactive({
  genderCounts: undefined,
  total: undefined
})
const nameList = ref(['男', '女', '其他'])
const dataList = ref()
const categories = ref([])

// 获取数据
const getData = async () => {
  const res: any = await getGenderNumberAPI()
  genderList = res.data
  res.data.genderCounts.forEach((item: any)=> {
    categories.value.push(item.gender + ' ' + item.count)
  })
  console.log('categories.value', categories.value)
  dataList.value = [
    {
      value: +res.data.genderCounts.filter((item: any) => {
        return item.gender === '男'
      })[0].count / +res.data.total * 100,
      name: '男',
      title: {
        offsetCenter: ['-40%', '-30%'],
      },
      detail: {
        offsetCenter: ['5%', '-30%'],
      },
      itemStyle: {
        color: '#85dbfb',
      }
    },

    {
      value: +res.data.genderCounts.filter((item: any) => {
        return item.gender === '女'
      })[0].count / +res.data.total * 100,
      name: '女',
      title: {
        offsetCenter: ['-40%', '0%'],
      },
      detail: {
        offsetCenter: ['5%', '0%'],
      },
      itemStyle: {
        color: '#d26bfd',
      },
    },

    {
      value: +res.data.genderCounts.filter((item: any) => {
        return item.gender === '其他'
      })[0].count / +res.data.total * 100,
      name: '其他',
      title: {
        offsetCenter: ['-40%', '30%'],
      },
      detail: {
        offsetCenter: ['5%', '30%'],
      },
      itemStyle: {
        color: '#87e9af',
      },
    }
  ]
}

const init = () => {
  const myChart = echarts.init(charts.value);
  const option = {
    title: {
      text: `性别比例`,
      left: 15,
      top: 10,
      textStyle: {
        color: '#fff',
        // align: 'center',
        // verticalAlign: 'middle',
        fontSize: 12
      }
    },
    series: [
      {
        type: 'gauge',
        radius: '70%',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        center: ['37%', '50%'],
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: true,
          itemStyle: {
            borderWidth: 1,
            borderColor: '#031E6D',
          },
        },
        axisLine: {
          lineStyle: {
            width: 40,
            color: [[1, 'rgba(17, 136, 255, .1)']],
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
        },
        data: dataList.value,
        title: {
          // show: false,
          fontSize: 10,
          // offsetCenter: ['30%', 0],
          fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
          color: '#ffffff',
        },
        detail: {
          width: 40,
          height: 14,
          fontSize: 12,
          // offsetCenter: ['30%', 0],
          fontFamily: ['pingfang sc', 'serif', 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei'],
          color: 'auto',
          borderColor: 'auto',
          borderRadius: 20,
          borderWidth: 1,
          // 在这里使用{name|text}语法来引用rich配置
          formatter: '{value}%',
        },
      },
    ],
    visualMap: [
      {
        type: 'piecewise',
        categories: categories.value,
        // itemWidth: 10,
        inRange: {
          color: ['#85dbfb', '#d26bfd', '#87e9af']
        },
        textStyle: {
          fontSize: 10,
          color: '#fff' // 设置字体颜色
        },
        align: 'left',
        orient: 'vertical',
        top: "center",
        left: 240
      }]
  };
  // 绘制图表
  myChart.setOption(option)
}

onMounted(() => {
  getData().then(res => {
    init()
  })
})
</script>

<template>
  <div class="gender-box center">
    <div class="gender-box-body">
      <div class="charts-sort" ref="charts">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.gender-box {
  width: 100%;
  height: 100%;

  .gender-box-body {
    width: 90%;
    height: 90%;
    border-radius: 10px;
    box-shadow: 2px 1px 8px 2px rgb(123, 173, 222);
    background-color: #555162;

    .charts-sort {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
